<template>
  <div class="similar-content-tool">
    <h2><icon-svg name="iconResTeam"></icon-svg>{{ config.tagNm }}</h2>
    <div class="analyse-handler clearfix">
      <template v-if="type === 'asideMine'">
        <span class="release-tips" v-if="config.releaseStatus === 2">发布审核中</span>
        <el-button
          size="mini"
          @click="handleEdit"
          v-if="config.tagReqStatus !== 1"
          :class="{ disabled: config.releaseStatus === 2 }"
        >
          <icon-svg name="iconFacEdit"></icon-svg>
          编辑
        </el-button>
        <el-button size="mini" @click="handleDelete">
          <icon-svg name="iconDelete"></icon-svg>
          删除
        </el-button>
      </template>
      <el-button size="mini" @click="handleCopy">
        <icon-svg name="iconCopy"></icon-svg>
        复制
      </el-button>
      <template v-if="type === 'asideMine'">
        <el-button size="mini" @click="handleMove">
          <icon-svg name="iconMove"></icon-svg>
          移动
        </el-button>
        <el-button size="mini" @click="handleRelease" v-if="config.tagReqStatus === 3">
          <icon-svg :name="config.releaseStatus ? 'iconRedo' : 'iconRelease'"></icon-svg>
          {{ config.releaseStatus ? '取消发布' : '发布' }}
        </el-button>
        <!-- <el-button size="mini" @click="hendleRun" v-if="config.tagReqStatus !== 1">
          <icon-svg name="iconExport"></icon-svg>
          重新运行
        </el-button> -->
      </template>
      <el-popover placement="bottom" v-model="downloadVisible" popper-class="similar-download-popover" width="300">
        <el-form :model="downloadForm" :rules="downloadFormRules" ref="downloadForm" label-width="120px">
          <el-form-item prop="topNum" label="导出数量">
            <el-input-number
              v-model="downloadForm.topNum"
              size="mini"
              :min="1"
              :step="1"
              step-strictly
              placeholder="请输入导出数量"
            ></el-input-number>
          </el-form-item>
          <el-form-item prop="fileType" label="保存文件格式">
            <el-select v-model="downloadForm.fileType" size="mini" placeholder="请选择保存文件格式">
              <el-option
                v-for="dict in $dictList('std_file_fmt')"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="fileCharset" label="文件字符集" v-if="downloadForm.fileType !== 2">
            <el-select v-model="downloadForm.fileCharset" size="mini" placeholder="请选择文件字符集">
              <el-option v-for="item in charsetList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="24" align="right">
              <el-button size="mini" type="text" @click="resetForm">取消</el-button>
              <el-button size="mini" type="primary" @click="handleDownload">确定</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-button
          slot="reference"
          size="mini"
          v-show="config.tagReqStatus === 3 && $auth('der:derCustExtension:download')"
        >
          <icon-svg name="iconExport"></icon-svg>
          导出结果
        </el-button>
      </el-popover>
    </div>
    <similar-operation-dialog ref="similarOperationDialog" @callback="$emit('rollback')"></similar-operation-dialog>
  </div>
</template>

<script>
import similarOperationDialog from '../components/similar-operation-dialog'
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: 'asideMine'
    }
  },
  components: { similarOperationDialog },
  data() {
    return {
      downloadVisible: false,
      charsetList: ['Big5', 'GB18030', 'GBK', 'US-ASCII', 'UTF-16', 'UTF-8', 'x-mswin-936'],
      downloadForm: {
        topNum: 1,
        fileType: 1,
        fileCharset: 'GBK'
      },
      downloadFormRules: {
        topNum: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
        fileType: [{ required: true, message: '保存文件格式不能为空', trigger: 'change' }],
        fileCharset: [{ required: true, message: '文件字符集不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleRelease() {
      this.$confirm(`确定${this.config.releaseStatus ? '取消发布' : '发布'}【${this.config.tagNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$utils
          .release(this.config.tagId, this.config.tagNm, '80', !this.config.releaseStatus ? 'post' : 'delete')
          .then(data => {
            this.$message.success(data.msg)
            this.$emit('rollback')
          })
          .catch(data => {
            this.$message.error(data.data || data.msg)
          })
      })
    },
    handleEdit() {
      if (this.config.releaseStatus == 2) {
        this.$message.info('分析正在审核中！')
        return
      }
      this.$router.push({ name: 'similar-config', query: { tagId: this.config.tagId, groupId: this.config.groupId } })
    },
    handleCopy() {
      this.$refs.similarOperationDialog.showDialog({
        tagId: this.config.tagId,
        tagNm: this.config.tagNm,
        type: 'copy'
      })
    },
    handleMove() {
      this.$refs.similarOperationDialog.showDialog({
        tagId: this.config.tagId,
        type: 'move'
      })
    },
    handleDelete() {
      this.$confirm(`确定删除【${this.config.tagNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$emit('setLoading', true)
        this.$ajax({
          url: this.$ajax.setUrl(`der/derCustExtension/deleteCustExtension/${this.config.tagId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$emit('deleteData')
            this.$message.success(data.msg)
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.$emit('setLoading', false)
        })
      })
    },
    hendleRun() {
      this.$confirm(`确定重新运行【${this.config.tagNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$emit('setLoading', true)
        this.$ajax({
          url: this.$ajax.setUrl(`DiffCustomerPortraits/getRestartDiff/${this.config.tagId}`),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$emit('rollback')
            this.$message.success(data.msg)
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.$emit('setLoading', false)
        })
      })
    },
    handleDownload() {
      this.$refs.downloadForm.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$ajax.setUrl('der/derCustExtension/download'),
            method: 'post',
            data: this.$ajax.setData({
              tagId: this.config.tagId,
              topNum: this.downloadForm.topNum,
              fileType: this.downloadForm.fileType,
              charsetName: this.downloadForm.fileType === 2 ? 'GBK' : this.downloadForm.fileCharset
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.resetForm()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    resetForm() {
      this.downloadForm.topNum = 1
      this.downloadForm.fileType = 1
      this.downloadForm.fileCharset = 'GBK'
      this.downloadVisible = false
    }
  }
}
</script>

<style lang="scss">
.tag-similar {
  .similar-content-tool {
    height: 50px;
    padding: 10px 0;
    h2 {
      color: #465fbc;
      padding-left: 15px;
      float: left;
      position: relative;
      &::before {
        width: 3px;
        content: '';
        background-color: #465fbc;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
      }
      svg {
        margin-right: 10px;
      }
    }
    .analyse-handler {
      float: right;
      text-align: right;
      .release-tips {
        color: $tag-red;
      }
      .el-button {
        font-size: 15px;
        color: #455fbc;
        background-color: transparent;
        border-color: transparent;
        &.disabled {
          color: #333;
        }
      }
      svg {
        width: 17px;
        height: 17px;
        margin-right: 3px;
        margin-top: -5px;
        vertical-align: middle;
      }
    }
  }
}
.similar-download-popover {
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }
}
</style>
